<template>
  <a-modal
    v-model:visible="modalVisible"
    @cancel="closeModal"
    width="600px"
    :top="100"
    :align-center="false"
    title="新增角色互斥"
    @ok="handleSubmit"
  >
    <template #footer>
      <a-button @click="closeModal">取消</a-button>
      <a-button type="primary" @click="handleSubmit">确定</a-button>
    </template>
    <a-transfer
      show-search
      :fieldNames="fieldNames"
      :data="data"
      :default-value="value"
      v-model:model-value="mutuallyExclusiveRoleIds"
    />
  </a-modal>
</template>

<script setup lang="ts">
import {
  getRoleList,
  getRoleListAll,
  getRoleExclusiveList
} from '@/apis/roleManagement/index';
import { RoleList } from '@/apis/roleManagement/type';
import { cloneDeep } from 'lodash';

const emit = defineEmits(['update:visible', 'addRoleExclusive']);
const envList: Array<string> = [];
for (const item in import.meta.env) {
  if (item.indexOf('VITE') === 0) {
    envList.push(item);
  }
}
const mutuallyExclusiveRoleIds = ref([]);
const fieldNames = { value: 'id', label: 'roleName' };
const data = ref([]);

const props = withDefaults(
  //参数说明
  defineProps<{
    editCompanyForm: any; //修改的数据
    visible: boolean; //是否打开modal
    masterRoleId: number;
  }>(),
  {
    visible: false
  }
);
// 控制确定取消按钮
const modalVisible = computed({
  //控制visible
  get() {
    return props.visible;
  },
  set() {
    return emit('update:visible', false);
  }
});

const getData = async () => {
  const res = await Promise.all([
    getRoleExclusiveList({ roleId: props.masterRoleId }),
    getRoleListAll({ excludeRoleIds: [props.masterRoleId] })
  ]);
  data.value = res[1].roleList.map((item) => {
    return {
      ...item,
      value: item.id,
      label: item.roleName
    };
  });
  if (res[0].list.length) {
    res[0].list.forEach((item) => {
      mutuallyExclusiveRoleIds.value.push(item.mutuallyExclusiveRoleId);
    });
  }
};
getData();

//取消
const closeModal = () => {
  modalVisible.value = false;
  mutuallyExclusiveRoleIds.value = [];
};
// const formRef = ref();
const handleSubmit = async () => {
  if (mutuallyExclusiveRoleIds.value) {
    emit('addRoleExclusive', mutuallyExclusiveRoleIds.value);
  }
  closeModal();
};
</script>
